{{ 'article-v2.min.css' | asset_url | stylesheet_tag }}

{%- liquid
  case section.settings.heading_alignment
    when 'left'
      assign heading_alignment = 'text-start'
    else
      assign heading_alignment = 'text-center'
  endcase

  case section.settings.image_height
    when 'adapt_to_image'
      if section.settings.show_featured_image and article.image
        assign img_class = ''
      else
        assign img_class = 'h-5'
      endif
    when 'small'
      assign img_class = 'h-5 h-md-6'
    when 'medium'
      assign img_class = 'h-6 h-md-7'
    else
      assign img_class = 'h-7 h-md-8'
  endcase
-%}

<article>
  <div class="card border-0 rounded-0 text-white">
    {%- if section.settings.show_featured_image and article.image -%}
      <figure class="mb-0 ratio {{ img_class }}"
        {% if section.settings.image_height == 'adapt_to_image' %}style="height: {{ article.image.height }}px; --se-aspect-ratio: {{ 1 | divided_by: article.image.src.aspect_ratio | times: 100 }}%;"{% endif %}>
        <picture>
          <img srcset="
            {{ article.image.src | img_url: '350x' }} 350w,
            {{ article.image.src | img_url: '390x' }} 390w,
            {{ article.image.src | img_url: '430x' }} 430w,
            {{ article.image.src | img_url: '480x' }} 480w,
            {{ article.image.src | img_url: '720x' }} 720w,
            {{ article.image.src | img_url: '780x' }} 780w,
            {{ article.image.src | img_url: '860x' }} 860w,
            {{ article.image.src | img_url: '960x' }} 960w,
            {{ article.image.src | img_url: '1200x' }} 1200w,
            {{ article.image.src | img_url: '1440x' }} 1440w,
            {{ article.image.src | img_url: '1920x' }} 1920w,
            {{ article.image.src | img_url: '2400x' }} 2400w"
            sizes="100vw"
            src="{{ article.image | img_url: '1100x' }}"
            loading="lazy"
            width="{{ article.image.width }}"
            height="{{ article.image.height }}"
            alt="{{ article.image.alt | escape }}"
            class="w-100 h-100 object-fit-cover">
        </picture>
      </figure>
    {%- else -%}
      <figure class="article-hero mb-0 ratio {{ img_class }}"></figure>
    {%- endif -%}
    <div class="card-img-overlay rounded-0" style="background:rgba(0,0,0,.5)">
      <div class="container h-100">
        <div class="row h-100 align-items-center justify-content-center {{ heading_alignment }}">
          <div class="col-12 col-md-8">
            {%- if section.settings.show_author or section.settings.show_date or section.settings.show_tag -%}
              <div class="gray-100 mb-4">
                {% render 'article-author-date-tag',
                  article: article,
                  show_author: section.settings.show_author,
                  show_date: section.settings.show_date,
                  show_tag: section.settings.show_tag
                %}
              </div>
            {%- endif -%}
            <h1 class="card-title mb-0">{{ article.title | escape }}</h1>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="container mt-5 mt-md-7 mb-7">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8">
        <div class="richtext-description">{{ article.content }}</div>
            {%- if section.settings.show_social_buttons -%}
              <div class="card-text mt-6">
                {% render 'social-sharing',
                  share_title: article.title,
                  share_permalink: article.url,
                  share_image: article.image
                %}
              </div>
            {%- endif -%}
        <div class="mt-5 mt-md-6">
          <a href="{{ blog.url }}" class="text-decoration-none fw-bold link-primary icon-wrap-sm d-flex align-items-center">
            <div>
              {% render 'icon-chevron-left' %}
            </div>
            <span>
              {{ 'blogs.article.back_to_blog' | t: title: blog.title }}
            </span>
          </a>
        </div>
      </div>
    </div>
  </div>
</article>
{% render 'structured-article' %}
{% schema %}
{
  "name": "Blog post",
  "tag": "section",
  "class": "main-article",
  "settings": [
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Heading alignment",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        }
      ],
      "default": "left"
    },
    {
      "type": "header",
      "content": "Title"
    },
    {
      "type": "checkbox",
      "id": "show_tag",
      "default": true,
      "label": "Show tag"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "Show date"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": true,
      "label": "Show author"
    },
    {
      "type": "header",
      "content": "Image"
    },
    {
      "type": "checkbox",
      "id": "show_featured_image",
      "label": "Show featured image",
      "default": true
    },
    {
      "type": "select",
      "id": "image_height",
      "label": "Image height",
      "options": [
        {
          "value": "adapt_to_image",
          "label": "Adapt to image"
        },
        {
          "value": "small",
          "label": "Small"
        },
        {
          "value": "medium",
          "label": "Medium"
        },
        {
          "value": "large",
          "label": "Large"
        }
      ],
      "default": "adapt_to_image"
    },
    {
      "type": "header",
      "content": "Social share buttons"
    },
    {
      "type": "checkbox",
      "id": "show_social_buttons",
      "label": "Show social buttons",
      "default": true
    }
  ]
}
{% endschema %}
